<template>
    <div class="ratings" ref="ratings">
        <div class="ratings-content">
            <div class="overview">
                <div class="overview-left">
                    <div class="score">{{seller.score}}</div>
                    <div class="title">综合评分</div>
                    <div class="rank">高于周边商家{{seller.rankRate}}%</div>
                </div>
                <div class="overview-right">
                    <div class="score-wrapper">
                        <span class="title">服务态度</span>
                        <star class="star" :size="36" :score="seller.serviceScore"></star>
                        <span class="score">{{seller.serviceScore}}</span>
                    </div>
                    <div class="score-wrapper">
                        <span class="title">商品评价</span>
                        <star class="star" :size="36" :score="seller.foodScore"></star>
                        <span class="score">{{seller.foodScore}}</span>
                    </div>
                    <div class="delivery-wrapper">
                        <span class="title">送达时间</span>
                        <span class="delivery">{{seller.deliveryTime}}分钟</span>
                    </div>
                </div>
            </div>
            <split></split>
            <ratingselect @select="selectRating" @toggle="toggleContent" :selectType="selectType" :onlyContent="onlyContent" :ratings="ratings"></ratingselect>
            <div class="rating-wrapper">
                <ul>
                    <li class="rating-item" v-for="(rating,index) in ratings" :key="index" v-show="needShow(rating.rateType,rating.text)">
                        <div class="avatar">
                            <img :src="rating.avatar" width="28" height="28">
                        </div>
                        <div class="name">{{rating.username}}</div>
                        <div class="star-wrapper">
                            <star :size="24" :score="rating.score"></star>
                            <span class="delivery" v-show="rating.delivery">{{rating.deliveryTime}}分钟送达</span>
                        </div>
                        <div class="text">{{rating.text}}</div>
                        <div class="recommend" v-show="rating.recommend && rating.recommend.length">
                            <span :class="{'icon-thumb_up':rating.rateType === 0}"></span>
                            <span class="item" v-for="(item,index) in rating.recommend" :key="index">{{item}}</span>
                        </div>
                        <div class="time">{{rating.rateTime | formatDate}}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import {formatDate} from '../../common/js/date.js';
import BScroll from 'better-scroll';
import star from '../../components/star/star';
import split from '../../components/split/split';
import ratingselect from '../../components/ratingselect/ratingselect';
const ALL = 2;
const ERR_OK = 0;
    export default {
        props: {
            seller: {
                type: Object
            }
        },
        data () {
            return {
                selectType: ALL,
                onlyContent: true,
                ratings: []
            };
        },
        components: {
            star,
            split,
            ratingselect
        },
        filters: {
            formatDate (time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        },
        methods: {
            needShow (type, text) {
                if (this.onlyContent && !text) {
                    return false;
                }
                if (this.selectType === ALL) {
                    return true;
                } else {
                    return type === this.selectType;
                }
            },
            selectRating (type) {
                this.selectType = type;
                this.$nextTick(() => {
                    this.scroll.refresh();
                });
            },
            toggleContent () {
                this.onlyContent = !this.onlyContent;
                this.$nextTick(() => {
                    this.scroll.refresh();
                });
            }
        },
        created () {
            this.axios.get('/api/ratings').then((res) => {
                if (res.data.errno === ERR_OK) {
                    this.ratings = res.data.data;
                    this.$nextTick(() => {
                        this.scroll = new BScroll(this.$refs.ratings, {
                            click: true
                        });
                    });
                }
            });
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl';
.ratings
    position :absolute
    top :174px
    left :0
    bottom :0
    width :100%
    overflow :hidden
    .overview
        display :flex
        padding: 18px 0
        .overview-left
            flex :0 0 135px
            width :135px
            text-align :center
            border-right :solid 1px rgba(147,153,159,0.1)
            @media only screen and (max-width:320px)
                flex :0 0 120px
            .score
                font-size :24px
                color :rgb(255,153,0)
                line-height :28px
            .title
                margin-top :6px
                font-size :12px
                line-height :12px
                color :rgb(7,17,27)
            .rank
                margin-top :8px
                font-size :10px
                line-height :10px
                color :rgb(147,153,159)
        .overview-right
            flex :1
            padding-left :24px
            @media only screen and (max-width :320px)
                padding-left :4px
            .score-wrapper
                margin-bottom :8px
                font-size :0
                .title
                    display :inline-block
                    vertical-align :top
                    margin-right :12px
                    font-size :12px
                    line-height :18px
                    color :rgb(7,17,27)
                .star
                    display :inline-block
                    vertical-align :top
                .score
                    display :inline-block
                    font-size :12px
                    color :rgb(255,153,0)
                    line-height :18px
            .delivery-wrapper
                .title
                    display :inline-block
                    vertical-align :top
                    margin-right :12px
                    font-size :12px
                    line-height :18px
                    color :rgb(7,17,27)
                .delivery
                    font-size :12px
                    color :rgb(147,153,159)
                    line-height :18px
    .rating-wrapper
        .rating-item
            position :relative
            padding :18px 18px 18px 58px
            font-size :0
            border-1px(rgba(147,153,159,0.1))
            .avatar
                position :absolute
                top: 18px
                left :18px
                margin-right :12px
                width :28px
                height :28px
                img
                    border-radius :50%
            .name
                font-size :10px
                color :rgb(7,17,27)
                line-height :12px
            .star-wrapper
                margin :4px 6px 6px 0
                .delivery
                    font-size :10px
                    font-weight :200
                    color :rgb(147,153,159)
                    line-height :12px
            .text
                font-size :12px
                color :rgb(7,17,27)
                line-height :18px
                margin-bottom :8px
            .recommend
                font-size :0
                .icon-thumb_down
                    margin-right :8px
                    font-size :12px
                    color :rgb(183,187,191)
                    line-height :16px
                .icon-thumb_up
                    margin-right :8px
                    font-size :12px
                    color :rgb(0,160,220)
                    line-height :16px
                .item
                    display :inline-block
                    border :solid 1px rgb(147,153,159)
                    padding :0 6px
                    margin-bottom :7px
                    margin-right :8px
                    font-size :9px
                    color :rgb(147,153,159)
                    line-height :16px
            .time
                position :absolute
                top :18px
                right :18px
                font-size :10px
                font-weight :200
                line-height :12px
                color :rgb(147,153,159)
</style>
